<template>
  <div class="order-handle-container">
    <!-- 订单列表表格 -->
    <el-table :data="orderList" border stripe style="width: 100%">
      <el-table-column prop="_id" label="订单编号" width="180" />
      <el-table-column prop="customer_name" label="客户姓名" width="120" />
      <el-table-column prop="customer_phone" label="联系电话" width="150" />
      <el-table-column prop="user_claim" label="问题描述" min-width="200" />
      <el-table-column prop="customer_address" label="地址" min-width="200" />
      <el-table-column prop="status" label="订单状态" width="100" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleOrderClick(scope.row)">
            处理
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 处理结果模态框 -->
    <el-dialog v-model="showDialog" title="处理订单" width="30%" :before-close="handleClose">
      <span>是否确认该订单已解决？</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="success" @click="confirmHandle('已完成')">已解决</el-button>
          <el-button type="danger" @click="confirmHandle('待分配站点')">未解决</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { handleWorkOrderByStaff } from '@/api/workOrder' // 引入处理订单的API
import { getWorkOrdersByStatus } from '@/api/workOrder'
import { onMounted } from 'vue'
// 假设引入处理订单的API（根据实际项目调整）

// 模拟订单数据（实际应从接口获取）
const orderList = ref([])
const getOrderList = async () => {
  try {
    const res = await getWorkOrdersByStatus({ status: '待处理' }) // 假设接口需要状态参数
    console.log(res)
    if (res.code === 200) {
      orderList.value = res.data
    } else {
      ElMessage.error(res.message)
    }
  } catch (error) {
    ElMessage.error('获取订单列表失败', error)
  }
}

onMounted(() => {
  getOrderList() // 页面加载时获取订单列表
})
// 模态框控制
const showDialog = ref(false)
// 当前处理的订单
const currentOrder = ref(null)

// 点击处理按钮
const handleOrderClick = (row) => {
  currentOrder.value = row
  showDialog.value = true
  console.log(currentOrder.value)
}

// 确认处理结果
const confirmHandle = async (status) => {
  if (!currentOrder.value) return

  try {
    console.log(currentOrder.value._id, { status })
    // 调用API更新订单状态（参数根据接口要求调整）
    const res = await handleWorkOrderByStaff(currentOrder.value._id, { targetStatus: status })

    if (res.code === 200) {
      ElMessage.success(`订单 ${currentOrder.value._id} 已标记为${status}`)
      // 更新本地数据（实际应重新获取列表）
      const index = orderList.value.findIndex((item) => item.orderId === currentOrder.value.orderId)
      if (index !== -1) {
        orderList.value[index].status = status
      }
      getOrderList()
      showDialog.value = false
    }
  } catch (error) {
    ElMessage.error('处理失败，请重试', error)
  }
}

// 关闭模态框
const handleClose = () => {
  showDialog.value = false
  currentOrder.value = null
}
</script>

<style scoped>
.order-handle-container {
  padding: 20px;
}

/* 调整模态框按钮间距 */
.el-dialog__footer .dialog-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
</style>
